<template>
  <div class="app-container beautify">
    <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
      <el-form-item label="片区" prop="deptId">
        <treeselect v-model="queryParams.deptId" style="width:200px" size="medium" :options="deptOptions" :show-count="true" placeholder="请选择片区" />
      </el-form-item>
      <el-form-item label="猪场名称" prop="roleKey">
        <el-input
          v-model="queryParams.pigfarmName"
          placeholder="请输入猪场名称"
          clearable
          size="medium"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="项目名称" prop="roleKey">
        <el-input
          v-model="queryParams.projectName"
          placeholder="请输入项目名称"
          clearable
          size="medium"
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="建设类型" prop="status">
        <el-select
          v-model="queryParams.buildType"
          placeholder="请选择建设类型"
          clearable
          size="medium"
          style="width: 240px"
        >
          <el-option label="楼房猪场" :value="1"></el-option>
          <el-option label="平房猪场" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="审批状态" prop="status">
        <el-select v-model="queryParams.status" clearable placeholder="请选择" size="medium">
          <el-option label="暂存" value="save"></el-option>
          <el-option label="审批中" value="active"></el-option>
          <el-option label="审批完成" value="completed"></el-option>
          <el-option label="作废、取消、删除" value="cancel"></el-option>
          <el-option label="退回、驳回" value="reject"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8" ref="add">
      <el-col :span="1.5">
        <!--<el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['budgetManager:budgeting:add']"
        >新增</el-button>-->
        <!-- <el-button
          type="danger"
          plain
          icon="el-icon-minus"
          size="mini"
          @click="handleDelete"
          v-hasPermi="['budgetManager:budgeting:delete']"
        >删除</el-button> -->
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" border size="mini" :data="list" @selection-change="handleSelectionChange"  :height="listHeight || fillHeight('listHeight',['queryForm','add','pagination'],['hamburger-container','tags-view-container'], 100)">
      <!-- <el-table-column type="selection" width="50" align="center" :selectable="selectEnable" /> -->
      <el-table-column label="序号" type="index" align="center" :show-overflow-tooltip="true" width="50" />
      <el-table-column label="项目编码" prop="projectNumber" :show-overflow-tooltip="true" align="center" min-width="120" />
      <el-table-column label="项目名称" prop="projectName" :show-overflow-tooltip="true" min-width="100" align="center"/>
      <el-table-column label="猪场名称" prop="pigfarmName" min-width="100" align="center"/>
      <el-table-column label="任务阶段" prop="taskStage" min-width="100" align="center"/>
      <el-table-column label="任务责任人" prop="dealName" min-width="100" align="center">
        <template slot-scope="scope">
          <span style="color: red;text-decoration: underline;cursor: pointer;" v-if="scope.row.taskStage!=='已结束'" @click="handlePageJump(scope.row)">{{scope.row.dealName}}</span>
          <span style="color: #42b983;" v-else>{{scope.row.dealName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="图纸结束时间" prop="designEndTime" min-width="120" :show-overflow-tooltip="true" align="center"/>
      <el-table-column label="预算结束时间" prop="budgeEndTime" min-width="120" :show-overflow-tooltip="true" align="center"/>
      <el-table-column label="审批状态" prop="statusName" min-width="100" align="center"/>
      <el-table-column label="操作" align="center" min-width="120" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-s-order"
            @click="handleDetail(scope.row)"
            v-hasPermi="['budgetManager:budgeting:edit']"
            v-if="scope.row.taskStage!=='分配预算人员'"
          >详情</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-if="canEdit(scope.row) && scope.row.taskStage!=='分配预算人员'"
            v-hasPermi="['budgetManager:budgeting:edit']"
          >修改</el-button>
          <!--<el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleRemove(scope.row)"
            v-if="canEdit(scope.row)"
            v-hasPermi="['budgetManager:budgeting:delete']"
          >删除</el-button>-->
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="audit(scope.row)"
            v-if="canAudit(scope.row) && scope.row.taskStage!=='分配预算人员'"
            v-hasPermi="['budgetManager:budgeting:edit']"
          >审批详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--    分页-->
    <BasePagination :that="this" ref="pagination"/>
  </div>
</template>

<script>
  import { listBudgeting,  delBudgeting,getDept} from "@/api/budgetManager/budgeting";
  import BaseIndex from "../../../views/base/BaseIndex";
  import BasePagination from "@/views/base/BasePagination";
  import {newWindowBpm} from "@/utils/openBpm";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  export default {
    name: "Budgeting",
    components: {BasePagination,Treeselect},
    extends:BaseIndex,
    data() {
      return {
        listHeight: 0,
        // 片区列表
        deptOptions:[],
      };
    },
    created() {
      this.init();
      this.getList();
    },
    methods: {

      /**
       * 责任人点击事件
       */
      handlePageJump(data){
        const { id, designId, taskStage} = data;
        if(taskStage==="分配预算人员"){
          this.$router.push({
            path:"/designManager/drawingDesign/addEditView",
            query:{
              type:"details",
              id:designId,
            }
          })
        }else if(taskStage==="已结束"){
          //this.$message.warning("已结束");
        }else{
          this.$router.push({
            path:"/budgetManager/budgeting/addEditView",
            query:{
              type:"edit",
              id,
            }
          })
        }
      },


      handleRemove(e){
        this.$confirm('是否确定删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delBudgeting(e.id).then(
            response => {
              if(response && response.code ===0){
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                this.getList();
              }else{
                this.msgError(response.msg)
              }
              this.loading = false;
            }
          ).catch((err) => {
            this.loading = false;
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      listBudgeting,
      delBudgeting,
      init(){
        // 获取片区
        getDept().then(res=>{
          if (res.code==0) {
            this.deptOptions = res.data
          }
        })
      },
      // 升级成功，不能勾选
      selectEnable(row, rowIndex) {
        if (this.canAudit(row)) return false;
        return true;
      },
      lxsq(){
        this.$router.push({
          path: '/projectManagement/initiation',
        })
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.$router.push({
          path: '/budgetManager/budgeting/addEditView',
          query: {
            type: 'add',
          }
        })
      },
      /** 新增按钮操作 */
      handleUpdate(row) {
        this.$router.push({
          path: '/budgetManager/budgeting/addEditView',
          query: {
            type: 'edit',
            id: row.id,
          }
        })
      },
      /** 详情按钮操作 */
      handleDetail(row) {
        this.$router.push({
          path: '/budgetManager/budgeting/addEditView',
          query: {
            type: 'detail',
            id: row.id,
          }
        })
      },
      resetData(){
        this.form = {
          申请时间:this.$zbPlugins.timeFormat(),
          申请人:this.$store.state.user.name,
        }
        this.sonList = []
      },
      onOpen() {},
      onClose() {
        this.reset()
      },
      close() {
        this.$emit('update:visible', false)
      },
      handelConfirm() {
        this.$refs['Budgeting'].validate(valid => {
          if (!valid) return
          this.close()
        })
      },
      // 能够编辑
      canEdit(row){
        // 待审核，审核中
        return !this.canAudit(row)
      },
      // 能够删除
      canDel(row){
        return !this.canAudit(row)
      },
      audit(row){
        newWindowBpm(row.instId,1)
      },
      // 能够查看审批
      canAudit(row){
        // 待审核，审核中
        return row.status=='active' || row.status=='completed'
      },
    },
  };
</script>
